<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <input type="text" placeholder="请输入手机号码" id="phoneInput" />
    <button id="searchBtn">查询</button>
    <table border="1">
        <thead>
            <tr>
                <th colspan="2">查询结果</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td width="100">手机号码段</td>
                <td id="phone"></td>
            </tr>
            <tr>
                <td>卡号归属地</td>
                <td id="addr"></td>
            </tr>
            <tr>
                <td>运营商</td>
                <td id="company"></td>
            </tr>
            <tr>
                <td>区号</td>
                <td id="areacode"></td>
            </tr>
            <tr>
                <td>邮编</td>
                <td id="zip"></td>
            </tr>
        </tbody>

    </table>
    </div>
    <script src="./lib/jquery.js"></script>
    <!-- <script src="http://apis.juhe.cn/mobile/get"></script> -->
    <script>
        $(function () {
            var sj = /^1[3|4|5|7|8][0-9]{9}$/;//手机号验证

            $('#searchBtn').on('click', function () {
                var shouji = $.trim($('#phoneInput').val());
                // console.log(shouji);
                if (shouji == '') {
                    return alert('请输入手机号');
                }
                if (!sj.test(shouji)) {

                    return alert('手机号格式不正确');

                }

                $.ajax({
                    type: 'get',
                    url: 'http://apis.juhe.cn/mobile/get?phone=' + shouji + '&key=9e76dcf7eb24cd3a070a80f6e912c780',
                    dataType: 'jsonp',
                    // success:function(res){
                    // $('#phone')
                    success: function (res) {
                        if (res.status == 200) {
                            $('#phone').text(shouji);
                            $('#addr').text(res.result.province + ' ' + res.result.city);
                            $('#company').text(res.result.company);
                            $('#areacode').text(res.result.areacode);
                            $('#zip').text(res.result.zip);
                            alert('查询成功');
                        }
                    }
                })

                // if(res.status!==200) return alert('获取数据失败')


            })
        })
    </script>
</body>

</html>